<!-- 企微导购码规则 -->
<!-- /marketingCenter/code/shopperscode/rule -->
<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <div class="title">规则设置</div>
      <div style="display:flex;">
        <div class="rulename">企微导购码欢迎语-这里是规则名称</div>
        <a href="#" @click.prevent="editdetail" class="edit">修改规则</a>
      </div>
      <div>
        <div class="detailbox1" style="padding: 20px;">
          <div class="item" style="margin-bottom:20px;" v-if="qwruledetail.content.length !== 0">
            <div class="content1">文字消息:</div>
            <div>
              <!-- <div v-for="content,index in qwruledetail.content">{{content}}</div> -->
              <div class="card-info" v-for="(item, index) in cardInfo" :key="index">
                <p v-html="formatCardInfo(item)"></p>
              </div>
            </div>
          </div>

          <div  class="item" style="margin-bottom:20px;" v-if="qwruledetail.imageUrl.length !== 0">
            <div class="content1">图片消息:</div>
            <img :src="imageUrl" alt="" class="content" v-for="imageUrl,index in qwruledetail.imageUrl">
          </div>

          <div v-for="miniProgramDto,index in qwruledetail.miniProgramDto">
            <div class="content1">小程序卡片消息:</div>
            <div class="item" v-if="miniProgramDto.text !==''&& miniProgramDto.text !== undefined">
              <div class="content">{{miniProgramDto.text}}</div>
            </div>

            <div class="item" v-if="miniProgramDto.appId !=='' && miniProgramDto.appId !== undefined">
              <div class="content1">APPID:</div>
              <div class="content">{{miniProgramDto.appId}}</div>
            </div>
            
            <div class="item" v-if="miniProgramDto.url !=='' && miniProgramDto.url !== undefined">
              <div class="content1">路径:</div>
              <div class="content">{{miniProgramDto.url}}</div>
            </div>

            <div class="item" v-if="miniProgramDto.title !=='' && miniProgramDto.title !== undefined">
              <div class="content1">标题:</div>
              <div class="content">{{miniProgramDto.title}}</div>
            </div>

            <div class="item" v-if="miniProgramDto.image !=='' && miniProgramDto.image !== undefined">
              <div class="content1"></div>
              <img :src="miniProgramDto.image" alt="" class="content" >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 企微导购码欢迎语规则 -->
    <a-modal v-model="qwrulevisible" title="提示" @ok="qwruleOk" width="460px">
      <div class="qwruletitle">请选择对应企微导购码欢迎语规则</div>
      <a-select 
        show-search
        v-model="welcomeId" 
        :show-arrow="false"
        :filter-option="filterOption"
        @change="qwruleChange"
        @blur="handleExpressBlur"
        placeholder="请选择" 
        style="width:250px;margin-right: 20px;"
        allowClear
        >
        <a-select-option 
          :value="item.id"
          v-for="item in qwruleList" 
          :key="item.id"
        > 
          {{ item.name }} 
        </a-select-option>
      </a-select>
      <a href="#" @click.prevent="ruledetail('修改细节',welcomeId)" class="detailbox" >查看规则细节</a>
      <div class="detailbox1" v-show="detailshow">
        <div class="item1" style="margin-top:10px;"  v-if="qwruledetail2.content.length !== 0">
          <div class="marg_box">文字消息:</div>
          <!-- <div class="content"  v-for="content,index in qwruledetail2.content">{{content}}</div> -->
          <div class="card-info" v-for="(item, index) in cardInfo" :key="index">
            <p v-html="formatCardInfo(item)"></p>
          </div>
        </div>

        <div class="item1" v-if="qwruledetail2.imageUrl.length !== 0">
          <div class="marg_box">图片消息:</div>
          <img :src="imageUrl" alt="" class="content" v-for="imageUrl,index in qwruledetail2.imageUrl">
        </div>

        <div v-for="miniProgramDto,index in qwruledetail2.miniProgramDto">
          <div class="marg_box">小程序卡片消息:</div>
          <div class="marg_box" v-if="miniProgramDto.text !==''&& miniProgramDto.text !== undefined">
            <div class="content">{{miniProgramDto.text}}</div>
          </div>

          <div class="marg_box" v-if="miniProgramDto.appId !=='' && miniProgramDto.appId !== undefined">
            APPID:{{miniProgramDto.appId}}
          </div>
          <div class="marg_box" v-if="miniProgramDto.url !=='' && miniProgramDto.url !== undefined">
            路径:{{miniProgramDto.url}}
          </div>
          <div class="marg_box" v-if="miniProgramDto.title !=='' && miniProgramDto.title !== undefined">标题:{{miniProgramDto.title}}</div>

          <div v-if="miniProgramDto.image !=='' && miniProgramDto.image !== undefined">
            <div></div>
            <img :src="miniProgramDto.image" alt="" class="content"  style="width:200px;height:200px;">
          </div>
        </div>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import { getWelcomeVoById, AllCpWelcome, setWelcomeBatch  } from '@/api/marketingCenter/code'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'

export default {
  components: {
    JImageUpload
  },
  name:'xx',
  data() {
    return {
      id: 0,
      welcomeId: 0,
      qwruledetail: {
        // miniProgramDto:{},
        // content: '',
        // imageUrl: '',
        miniProgramDto:[],
        content:[],
        imageUrl:[],
      },
      qwrulevisible: false,
      qwruledetail2: {
        // miniProgramDto: {},
        // content: '',
        // imageUrl: '',
        miniProgramDto:[],
        content:[],
        imageUrl:[],
      },
      qwruleList: [],
      detailshow: false, // 查看细节显示隐藏
      cardInfo: [],
    }
  },
  created() {
    var url = this.$route.path.split('=')
    this.id = Number(url[1])
    this.welcomeId = Number(url[2])
    this.ruledetail('查看规则',this.welcomeId,)
  },
  computed: {
    formattedCardInfo() {
      const lines = this.content.join("\n")
      let result = ""
      const parser = new DOMParser()
      const doc = parser.parseFromString(lines, "text/html")
      const nodes = doc.body.childNodes
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.nodeName === "#text") {
          result += node.textContent
        } else if (node.nodeName === "A") {
          result += `<a href="#">${node.textContent}</a>`
        }
      }
      return result
    }
  },
  methods:{
    formatCardInfo(item) {
      let result = ""
      const parser = new DOMParser()
      const doc = parser.parseFromString(item, "text/html")
      const nodes = doc.body.childNodes
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.nodeName === "#text") {
          result += node.textContent.replace(/\n/g, '<br>')
        } else if (node.nodeName === "A") {
          result += `<a href="#">${node.textContent}</a>`
        }
      }
      return result
    },
    ruledetail(name,id) {
      getWelcomeVoById({id}).then(res =>{
        if(res.code == 200) {
          if (name == '查看规则') {
            this.getqwruledetail(res)
          } else if (name == '修改细节') {
            this.getqwruledetail2(res)
            this.detailshow = true
          }
        }
      })
    },
    qwruleChange(e) {
      this.welcomeId = e
      this.detailshow = false
    },
    getqwruledetail(res) {
      this.qwruledetail = {
        content:[],
        imageUrl:[],
        miniProgramDto:[],
      }
      res.data.itemList.forEach(el => {
        if (el.type == 1) {
          this.qwruledetail.content.push(el.content)
          this.cardInfo = this.qwruledetail.content
        } else if (el.type == 2) {
          this.qwruledetail.imageUrl.push(el.imageUrl)
        } else if (el.type == 3) {
          this.qwruledetail.miniProgramDto.push(el.miniProgramDto)
        } 
      });
    },
    getqwruledetail2(res) {
      this.qwruledetail2 = {
        content:[],
        imageUrl:[],
        miniProgramDto:[],
      }
      res.data.itemList.forEach(el => {
        if (el.type == 1) {
          this.qwruledetail2.content.push(el.content)
        } else if (el.type == 2) {
          this.qwruledetail2.imageUrl.push(el.imageUrl)
        } else if (el.type == 3) {
          this.qwruledetail2.miniProgramDto.push(el.miniProgramDto)
        } 
      });
    },
    editdetail() {
      this.qwrulevisible = true
      this.getAllCpWelcome()
    },
    getAllCpWelcome() {
      AllCpWelcome().then(res =>{
        if(res.code == 200) {
          this.qwruleList = res.data
        }
      })
    },
    qwruleOk() {
      let ids = this.id
      let welcomeId = this.welcomeId
      setWelcomeBatch({
        ids:ids,
        welcomeId:welcomeId
      }).then(res => {
        if(res.code == 200) {
          this.$message.success('操作成功')
          this.qwrulevisible = false;
          this.$router.push('/marketingCenter/code/shoppecode')
        } else {
          this.$message.success('操作失败')
        }
      })
    },
    handleExpressBlur(e) {
      this.welcomeId = e
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>

<style scoped  lang="less" >
.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.edit {
  text-decoration: underline;
  line-height: 40px;
}
.rulename {
  font-size: 25px;
  font-weight: 600;
  margin-right: 20px;
}
.qwruletitle {
  font-weight: 600;
  color: #000;
  margin-bottom: 10px;
}
.detailbox {
  text-decoration: underline;
}
.detailbox1 {
  img {
    width: 100px;
    height: 100px;
  }
  .content1 {
    width: 150px;
    text-align: right;
    margin-right: 40px;
    margin-bottom: 10px;
  }
  .content {
    // margin-top: 5px;
    word-wrap: break-word;
  }
  
  .item {
    display: flex;
    // margin-bottom: 20px;
  }
  .item1 {
    margin-bottom: 20px;
  }
  .marg_box {
    margin-bottom: 10px;
  }
}
</style>